<template>
  <div>
    <!--    <h2>Cheshire</h2>-->
    <!--    <img :src="logoCheshire" class="logo" alt="logoCheshire" />-->
    <!--    <img :src="logo" alt="logo" />-->
    <header-bar></header-bar>
    <el-container>
      <el-main>
        <el-radio-group v-model="radioType" size="small">
          <el-radio-button label="login">登录</el-radio-button>
          <el-radio-button label="signup">注册</el-radio-button>
        </el-radio-group>
        <el-row v-show="radioType === 'login'" type="flex" align="middle">
          <el-form :model="loginFormData" status-icon ref="formRef" label-width="100px" :label-position="'top'"
            class="form">
            <el-form-item label="用户名" prop="username">
              <el-input v-model="loginFormData.username"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input type="password" v-model="loginFormData.password" autocomplete="off"></el-input>
            </el-form-item>
            <el-row>
              <el-checkbox v-model="rememberPassword">记住密码</el-checkbox>
              <div class="forgetPassword">忘记密码</div>
            </el-row>
            <el-form-item>
              <el-button class="loginButton" type="primary" @click="handlerLogin">登录</el-button>
            </el-form-item>
          </el-form>
        </el-row>
        <el-row v-show="radioType === 'signup'" type="flex" align="middle">
          <el-form :model="formData" status-icon ref="formRef" label-width="100px" :label-position="'top'" class="form">
            <el-form-item label="用户名" prop="username">
              <el-input v-model="signupFormData.username"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input type="password" v-model="signupFormData.password" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="checkPass">
              <el-input type="password" v-model="signupFormData.checkPassword" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button class="loginButton" type="primary" @click="handlerSignUp">注册</el-button>
            </el-form-item>
          </el-form>
        </el-row>
      </el-main>

    </el-container>
  </div>
</template>

<script setup>
import { setLoginCookies } from '@/utils'
import { ref } from 'vue'
import HeaderBar from '@/components/HeaderBar.vue'

const rememberPassword = ref('false')
const radioType = ref('login')
const loginFormData = ref({
  username: '',
  password: ''
})
const signupFormData = ref({
  username: '',
  password: '',
  checkPassword: ''
})
const handlerLogin = () => {
  setLoginCookies()
}
const handlerSignUp = () => {

}
</script>

<style scoped>
.logo {
  width: 100px;
  height: inherit;
}

.form-container {
  width: min(600px, 90vw);
}

.form {
  margin: 20px auto;
  /*display: flex;*/
  /*flex-direction: column;*/
  /*justify-content: center;*/
  /*align-content: center;*/
}

.forgetPassword {
  margin-left: 20px;
  height: 32px;
  font-size: 14px;
  line-height: 14px;
  color: #606266;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.loginButton {
  margin: 10px auto;
  width: 100%;
}
</style>
